<script setup lang="ts">
import { ref } from 'vue'
import {JSX} from "vue/jsx-runtime";

defineProps<{ msg: string }>()

const count = ref(0)
const reqMsg = ref('')
const rspMsg = ref('deepseek的响应结果')

let sendMsg=async ()=>{
  //发送http请求
  //对接大模型api
  //获取appid秘钥，签名算法签名
  //调用deepseek官方接口
  let rsp=await fetch('http://127.0.0.1:11434/api/chat',{
    method: 'POST',
    body: JSON.stringify({"model":"deepseek-r1:1.5b","messages":[{"role":"system","content":"You are a helpful assistant."},{"role":"user","content":reqMsg.value}],"stream":true,"options":{"temperature":0.7}})
  })
  //流式接受，边生成，边返回，定义io
  let reader=rsp.body.getReader()
  //死循环读取io流
  while (true){
    //返回字节码和done
    let {value,done} = await reader.read();//返回promise
    if (done){break}//完成了
    //把字节码变成字符串,解码为字符串
    let s=new TextDecoder().decode(value)
    //处理粘包
    s.split('\n').forEach(item=>{
      console.log('流式返回结果：',item)
      if (item){
        let obj=JSON.parse(item)
        rspMsg.value+=obj.message.content;
      }
    })
  }

}
</script>

<template>
  <div style="display: flex;flex-direction: column">
    deepseek消息响应
    <div style="width: 450px;height:400px;border: solid 1px;overflow: auto">
      {{rspMsg}}
    </div>
    <div>
      <label>输入消息：</label>
      <input v-model="reqMsg">
      <button @click="sendMsg">发送</button>
    </div>
  </div>

  <h1>{{ msg }}</h1>


  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
